<template>
  <div  class="pagination">
      <button :disabled = "currentPage === 1"  @click="$emit('changePageNo',currentPage - 1)">上一页</button>
      <button v-if="startEnd.start > 1" @click="$emit('changePageNo', 1)">1</button>
      <button v-if="startEnd.start  > 2">...</button>

      <!-- vfor和vif同时使用，vfor优先级大于vif
        官方不推荐这么使用，但是可以使用 -->
      <!-- <button :class="{active:currentPage ===page }" v-for="page in startEnd.end" :key="page"
       v-if="page >= startEnd.start"
       @click="$emit('changePageNo',page )"
        >{{page}}</button> -->

      <!-- 上面的做法不推荐，如何优化  计算属性去计算出来不需要判断之间遍历的数据 -->
       <button v-for="page in continueNoArr" :key="page"
         :class="{active:page === currentPage}"
         @click="$emit('changePageNo',page)"
       >{{page}}</button>
     

      <button  v-if="startEnd.end < totalPageNo - 1">...</button>
      <button v-if="startEnd.end < totalPageNo"   @click="$emit('changePageNo',totalPageNo)">总页数{{totalPageNo}}</button>
      <button :disabled = "currentPage === totalPageNo"  @click="$emit('changePageNo',totalPageNo + 1)">下一页</button>

       <span style="margin-left: 30px">共 {{total}} 条</span>
  </div>
</template>

<script>
export default { 
   name:'Pagination',
   props:{
      currentPage:Number,
      total:{
          type:Number,
          default:0
      },
      pageSize:{
           type:Number,
           default:10
      },
      continueNo:{
          type:Number,
          default:5
      }
   },

   computed:{
        //总页数
        totalPageNo(){
            return  Math.ceil(this.total / this.pageSize)
        },

        //连续页的开头和结尾
        startEnd(){
            let {currentPage,continueNo,totalPageNo} = this
            let  start = 0
            let end = 0
            if(totalPageNo < continueNo){
               start = 1
               end = totalPageNo
            }else{
               start = currentPage - Math.floor(continueNo / 2 )
               end = currentPage  + Math.floor (continueNo  / 2)

               //修正左侧起始页小于1变成负数的情况
               if(start < 1){
                  start = 1
                  end = continueNo
               }
               //修正右侧结束页超过总页数的情况
               if(end > totalPageNo){
                   end = totalPageNo
                   start = totalPageNo  - continueNo + 1
               }
            }

            return {start,end}
        },

      //计算出来连续页这几个数形成的数组，方便上面遍历，确定当前页是哪个
      continueNoArr(){
         let {start,end} = this.startEnd
        let arr = []
        for(let i =start;i<=end;i++ ){
           arr.push(i)
        }
         return arr
      }
   }
}
</script>

<style lang="less" scoped>
    .pagination {
  text-align: center;
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #C81623;
      color: #fff;
    }
  }
  span{
    display: inline-block;
    line-height: 28px;
    font-size: 14px;
    color:gray;
    vertical-align: middle;
  }
}
</style>